<script setup lang="tsx">
import { ref, watch } from 'vue';
import { getLotInfoSubitem } from '@/service/api';

const lotId = defineModel<string>('lotId', { required: true });

interface Model {
  [key: string]: string;
}
const formList = [
  {
    key: 'lotId',
    label: '生产批号'
  },
  {
    key: 'lotStatus',
    label: '批次状态'
  },
  {
    key: 'siteId',
    label: '工厂代码'
  },
  {
    key: 'pnlId',
    label: '工单代码'
  },
  {
    key: 'productName',
    label: '产品名称'
  },
  {
    key: 'productVer',
    label: '产品版本'
  },
  {
    key: 'routeName',
    label: '制程名称'
  },
  {
    key: 'routeVer',
    label: '制程版本'
  },
  {
    key: 'stepName',
    label: '站点名称'
  },
  {
    key: 'stepVer',
    label: '站点版本'
  },
  {
    key: 'waitingMoveInQty',
    label: '等待移入数量'
  },
  {
    key: 'waitingTrackInQty',
    label: '等待上机数量'
  },
  {
    key: 'waitingTrackOutQty',
    label: '等待下机数量'
  },
  {
    key: 'waitingMoveOutQty',
    label: '等待移出数量'
  },
  {
    key: 'priority',
    label: '优先权'
  },
  {
    key: 'startDate',
    label: '开始日期'
  },
  {
    key: 'areaId',
    label: '作业区域代码'
  },
  {
    key: 'locationId',
    label: '工作位置代码'
  },
  {
    key: 'customerCode',
    label: '客户代码'
  },
  {
    key: 'customerPart',
    label: '客户料号'
  },
  {
    key: 'abilityId',
    label: '能力代码'
  },
  {
    key: 'equipmentId',
    label: '设备代码'
  }
];

const model = ref<Model>(getModel());

function getModel() {
  const obj: any = {};
  formList.forEach(item => {
    obj[item.key] = null;
  });

  return obj;
}

watch(
  () => lotId.value,
  val => {
    if (val) {
      getLotInfoSubitem(val).then(({ data, error }) => {
        if (!error) {
          model.value = data;
        }
      });
    }
  }
);
</script>

<template>
  <AForm
    :model="model"
    :label-col="{
      span: 5,
      md: 7
    }"
    class="search-form"
  >
    <ARow :gutter="[15, 8]" wrap class="w-full">
      <ACol v-for="item in formList" :key="item.key" :span="8" :md="8" :lg="8" :xl="6" :xxl="6">
        <AFormItem :label="item.label" :name="item.key" class="m-0" :label-col="{}">
          <AInput
            v-model:value="model[item.key]"
            placeholder=""
            class="min-form-control"
            allow-clear
            autocomplete="off"
            disabled
          />
        </AFormItem>
      </ACol>
    </ARow>
  </AForm>
</template>

<style></style>
